<template>
  <div class="forget_main" :style="{height:curHeight+'px'}" style="min-height: 600px;">
    <a-row>
      <a-col :span="8"/>
      <a-col :span="8">
        <div class="forget_form" v-if="role">
            <div class="find_pass">
              <h4>找回密码</h4>
              <router-link :to="{name:'login'}">想起密码，返回登陆</router-link>
             <a-form   :form="form" style="margin-top: 20px">
                 <a-form-item>
                     <a-input size="large"
                              type="text"
                              placeholder="邮箱"
                              v-decorator="['email', {rules: [{ required: true, type: 'email', message: '请输入邮箱地址' }],
                               validateTrigger: ['change', 'blur']}]"
                     />
                 </a-form-item>

                 <a-row :gutter="16">
                     <a-col class="gutter-row" :span="16">
                         <a-form-item>
                             <a-input size="large" type="text" placeholder="验证码"
                                      v-decorator="['code', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
                                 <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                             </a-input>
                         </a-form-item>
                     </a-col>
                     <a-col class="gutter-row" :span="8">
                         <a-button
                                 class="getCaptcha"
                                 size="large"
                                 :disabled="state.smsSendBtn"
                                 @click="getEmailcode"
                                 v-text="!state.smsSendBtn && '获取验证码'||(state.time+' s')"/>
                     </a-col>
                 </a-row>

                 <a-form-item>
                     <a-button size="large" type="primary"
                               htmlType="submit"
                               class="submit_button"
                               :loading="submitBtn"
                               @click.stop.prevent="handleSubmit"
                               :disabled="submitBtn">提交
                     </a-button>
                 </a-form-item>

             </a-form>

            </div>
        </div>
          <div class="forget_form" v-if="!role">
              <div class="find_pass">
                  <h4>填写新密码</h4>
                  <router-link :to="{name:'login'}">想起密码，返回登陆</router-link>


                  <a-form ref="formRegister" :form="form" id="formRegister" style="margin-top: 20px;">
                      <a-popover
                              placement="rightTop"
                              :trigger="['focus']"
                              :getPopupContainer="(trigger) => trigger.parentElement"
                              v-model="state.passwordLevelChecked">
                          <template slot="content">
                              <div :style="{ width: '240px' }" >
                                  <div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
                                  <a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor " />
                                  <div style="margin-top: 10px;">
                                      <span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
                                  </div>
                              </div>
                          </template>
                          <a-form-item>
                              <a-input
                                      size="large"
                                      type="password"
                                      @click="handlePasswordInputClick"
                                      autocomplete="false"
                                      placeholder="至少8位密码，区分大小写"
                                      v-decorator="['password', {rules: [{ required: true, message: '至少6位密码，区分大小写'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
                              />
                          </a-form-item>
                      </a-popover>

                      <a-form-item>
                          <a-input
                                  size="large"
                                  type="password"
                                  autocomplete="false"
                                  placeholder="确认密码"
                                  v-decorator="['password2', {rules: [{ required: true, message: '至少8位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
                          />
                      </a-form-item>
                      <a-form-item>
                          <a-button size="large" type="primary" htmlType="submit" class="submit_button" :loading="submitBtn"
                                    @click.stop.prevent="ChangePasshandleSubmit" :disabled="submitBtn">重置密码
                          </a-button>
                      </a-form-item>
                  </a-form>



              </div>
          </div>
       </a-col>
      <a-col :span="8"/>
    </a-row>

  </div>
</template>

<script>
    import {getCode,sendEmail} from "@/api/login";
    import {modfiyPass} from '@/api/login'
    import Vue from 'vue'
    const levelNames = {
        0: '低',
        1: '低',
        2: '中',
        3: '强'
    };
    const levelClass = {
        0: 'error',
        1: 'error',
        2: 'warning',
        3: 'success'
    };
    const levelColor = {
        0: '#ff0000',
        1: '#ff0000',
        2: '#ff7e05',
        3: '#52c41a'
    };
    export default {
        name: "forgetpassword",
      data(){
          return{
              role:true,
              form: this.$form.createForm(this),
              curHeight:0,
              state: {
                  time: 60,
                  smsSendBtn: false,
                  passwordLevel: 0,
                  passwordLevelChecked: false,
                  percent: 10,
                  progressColor: '#FF0000'
              },
              submitBtn:false,
          }
      }, computed: {
            passwordLevelClass () {
                return levelClass[this.state.passwordLevel]
            },
            passwordLevelName () {
                return levelNames[this.state.passwordLevel]
            },
            passwordLevelColor () {
                return levelColor[this.state.passwordLevel]
            }
        },created: function () {
            this.curHeight = document.body.clientHeight;
        }, methods:{
            getEmailcode (e) {
                e.preventDefault()
                const { form: { validateFields }, state, $message, $notification } = this

                    validateFields(['email'], { force: true },
                        (err, values) => {
                            if (!err) {
                                state.smsSendBtn = true

                                const interval = window.setInterval(() => {
                                    if (state.time-- <= 0) {
                                        state.time = 60
                                        state.smsSendBtn = false
                                        window.clearInterval(interval)
                                    }
                                }, 1000)

                                const hide = $message.loading('验证码发送中..', 0)

                                getCode({email: values.email }).then((response)=> {
                                    setTimeout(hide, 2500)
                                    $notification['success']({
                                        message: '提示',
                                        description: '验证码获取成功，',
                                        duration: 8
                                    })
                                    console.log(response.data.email)
                                    Vue.ls.set('email',response.data.email)
                                }).catch(err => {
                                    setTimeout(hide, 1)
                                    clearInterval(interval)
                                    state.time = 60
                                    state.smsSendBtn = false
                                    this.requestFailed(err)
                                })
                            }
                        }
                    )
                },
            
            handleSubmit () {
                this.submitBtn= true;
                const { form: { validateFields }} = this;
                validateFields({ force: true }, (err,values) => {
                    if (!err) {
                        this.submitBtn= true;
                        const codeParams = { ...values }

                        codeParams.email=values.email
                        codeParams.code=values.code
                        sendEmail(codeParams).then(()=>{
                            //console.log(response.data)
                            this.submitBtn= false;
                        }).catch()
                        this.role=!this.role
                        this.submitBtn=!this.submitBtn
                        //$router.push({ name: 'login'})
                    }
                })
            },
            handlePasswordLevel (rule, value, callback) {
                let level = 0;

                // 判断这个字符串中有没有数字
                if (/[0-9]/.test(value)) {
                    level++
                }
                // 判断字符串中有没有字母
                if (/[a-zA-Z]/.test(value)) {
                    level++
                }
                // 判断字符串中有没有特殊符号
                if (/[^0-9a-zA-Z_]/.test(value)) {
                    level++
                }
                this.state.passwordLevel = level;
                this.state.percent = level * 30;
                if (level >= 2) {
                    if (level >= 3) {
                        this.state.percent = 100
                    }
                    callback()
                } else {
                    if (level === 0) {
                        this.state.percent = 10
                    }
                    callback(new Error('密码强度不够'))
                }
            },

            handlePasswordCheck (rule, value, callback) {
                const password = this.form.getFieldValue('password');
                //console.log('value', value);
                if (value === undefined) {
                    callback(new Error('请输入密码'))
                }
                if (value && password && value.trim() !== password.trim()) {
                    callback(new Error('两次密码不一致'))
                }
                callback()
            },



            handlePasswordInputClick () {
                if (!this.isMobile) {
                    this.state.passwordLevelChecked = true;
                    return
                }
                this.state.passwordLevelChecked = false
            },

            ChangePasshandleSubmit () {
                const { form: { validateFields }, state,$router} = this;
                validateFields({ force: true }, (err,values) => {
                    if (!err) {
                        state.passwordLevelChecked = false;
                        const passParams = { ...values }

                        passParams.email=Vue.ls.get("email")
                        //passParams.code=values.code
                        console.log(passParams)
                        modfiyPass(passParams).then(()=>{
                            // console.log(reponse)
                            Vue.ls.remove('email');
                            $router.replace({ name: 'login'})

                        }).catch()
                    }
                })
            },

            requestFailed (err) {
                this.$notification['error']({
                    message: '错误',
                    description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
                    duration: 4
                });
                this.registerBtn = false
            }

      }
    }
</script>

<style scoped>
    .forget_main{
      width: 100%;
      min-width: 1200px;
      min-height: 100%;
      height: 100%;
      background-size: 100%;
      padding: 110px 0 144px;
      position: relative;
      background: #0c3eff url(~@/assets/background.svg) no-repeat 50% 50%;
    }
  .forget_form {

    width: 100%;
    min-width: 400px;
    height: 320px;
    background-color: #FFFFFF;
    border-radius: 4px;

  }
    .forget_form .find_pass{
      position: relative;
       width: 80%;
       height:280px;
       padding-top: 20px;
       margin: 0px auto;

    }
  .forget_form .find_pass h4{
    font-size: 18px;
    color: #42a5f5;
    text-align: center;
    width: 400px;
    margin: 0 auto;
  }
    .submit_button{
        width: 100%;

    }

</style>
